<template>
  <div class="public-op">
    <div class="card-item" style="height: 440px; width: 615px;">
      <p class="card-title">舆情采集信源</p>
      <div class="card-div">
        <div class="rt-collect">
          <p>今日实时采集</p>
          <h2>
            <count-to :end="rtCollection" usegroup/>
          </h2>
        </div>
        <div style="height: 230px; ">
          <el-row>
            <el-col :span="12">
              <div class="collect-source">
                <div>
                  <span>
                    <count-to :end="netSiteNum" usegroup/>
                  </span>
                </div>
                <p>网站信源</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="collect-source">
                <div>
                  <span>
                    <count-to :end="currentInclude" usegroup/>
                  </span>
                </div>
                <p>当前收录</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="card-item" style="height: 440px; margin-left: 20px;">
      <p class="card-title">活跃站点</p>
      <div class="card-div">
        <common-bar-chart ref="activeSite" :config="activeSiteConfig"></common-bar-chart>
      </div>
    </div>

    <div class="card-item" style="height: 440px; margin-top: 20px;">
      <p class="card-title">舆情信息收录</p>
      <div class="card-div">
        <p class="info-record-top">
          <i class="non-negative-bg"></i>
          <span> 非负面 </span>
          <i class="sensitive-bg"></i>
          <span> 敏感 </span>
        </p>
        <el-row>
          <el-col style="width: 20%;" v-for="(res, index) in infoRecords" :key="index">
            <div>
              <p class="info-record-t info-record-th">{{res.title}}</p>
              <p class="info-record-t non-negative">{{res.nonNegative}}</p>
              <p class="info-record-t sensitive">{{res.sensitive}}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="card-item" style="height: 440px; margin-top: 20px;margin-left: 20px;">
      <p class="card-title">本县旅游舆情监测预警</p>
      <div class="card-div">
        <opinion-early-warning></opinion-early-warning>
      </div>
    </div>

    <div class="card-item" style="height: 424px; width: 100%;margin-top: 20px;">
      <p class="card-title">全域旅游产业监测数据</p>
      <div class="card-div" style="height: 350px;">
        <div class="monitor-data" style="float: left;">
          <el-radio-group v-model="radio" size="small" @change="switchTable">
            <el-radio label="酒店" border>酒店</el-radio>
            <br />
            <el-radio label="KTV" border>KTV</el-radio>
            <br />
            <el-radio label="公共场所" border>公共场所</el-radio>
            <br />
            <el-radio label="景区" border>景区</el-radio>
            <br />
            <el-radio label="旅行社" border>旅行社</el-radio>
          </el-radio-group>
        </div>
        <div style="float: right; width: 1050px; height: 330px; margin:20px 24px 0 0;">
          <common-table ref="monitorTable" :config="monitorConfig"></common-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import OpinionEarlyWarning from '@/views/humanistic-tourism/public-opinion/opinion-early-warning.vue';
import CommonTable from '@/components/common/common-table.vue'
import CommonBarChart from '@/components/common/common-bar-chart.vue';
import CountTo from '@/components/count-to';
  export default {
    components: {
      OpinionEarlyWarning,
      CommonTable,
      CommonBarChart,
      CountTo
    },
    data() {
      return {
        rtCollection:0,
        netSiteNum:0,
        currentInclude:0,
        infoRecords: [],
        radio:'酒店',
        monitorConfig:{
          	request: {
          		url: "url",
          		params: {

          		}
          	},
          	option: {
              id:'monitor',
          		height: 330,
          		tableColor: '#FBCC13',
          		tableHeader: [{
          			prop: "num",
          			title: "序号",
                type:'index',
                width:'60px'
          		}, {
          			prop: "basicName",
          			title: "要素名称",
          		}, {
          			prop: "basicLevel",
          			title: "级别",
          		},{
          			prop: "basicCategory",
          			title: "类型",
          		},{
          			prop: "basicPhone",
          			title: "电话",
          		},{
          			prop: "basicAddress",
          			title: "地址",
                width:'200px'
          		},{
          			prop: "basicLong",
          			title: "经度",
          		},{
          			prop: "basicLat",
          			title: "纬度",
          		}],
          		tableData:[]
          	},
          },
          activeSiteConfig:{
        request: {
          url: "url",
          params: {},
        },
        option: {
          id: 'activeSiteBar',
          yName:"(%)",
          xAxis: [],
          y: [{
            axis: {
              min: 0,
              max: 10000,
              name:'条'
            },
            title: '',
            data: [],
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#2764E2' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#62FFEB' // 100% 处的颜色
              }],
            },
            stack: '1'
          }]
        }
      }
      }
    },
    mounted() {


      // this.changeData();
      this.msgIncloude();
      this.switchTable();
      this.getActiveSite();
      this.getCollectNum();

      this.totalInterval = setInterval(()=> {
        this.msgIncloude();
        this.getActiveSite();
        // this.changeData();
        this.getCollectNum();
      },20000);
    },
    methods: {
      changeData() {
        this.rtCollection = this.rtCollection + (100 + parseInt(Math.random()*20));
        this.netSiteNum = this.netSiteNum + (200 + parseInt(Math.random()*50));
        this.currentInclude = this.currentInclude + parseInt(Math.random()*20);
      },
      msgIncloude() {
        this.$jqPost(this.$api.getMsgIncloude, {
            action:"getInfoNum",
          	account:'admin@htlywhj',
          	password:'admin'
        }).then(res => {
          this.infoRecords = [
            {title:'总量',nonNegative:res.other.allNum,sensitive:res.negative.allNum},
            {title:'新闻',nonNegative:res.other.newsNum,sensitive:res.negative.newsNum},
            {title:'论坛',nonNegative:res.other.forumNum,sensitive:res.other.forumNum},
            {title:'网络媒体',nonNegative:res.other.pmMNum,sensitive:res.other.pmMNum},
            {title:'微博',nonNegative:res.other.weiboNum,sensitive:res.other.weiboNum},
            {title:'微信',nonNegative:res.other.wechatNum,sensitive:res.other.wechatNum},
            {title:'博客',nonNegative:res.other.blogNum,sensitive:res.other.blogNum},
            {title:'客户端',nonNegative:res.other.appNum,sensitive:res.other.appNum},
            {title:'贴吧',nonNegative:res.other.tiebaNum,sensitive:res.other.tiebaNum},
            {title:'综合',nonNegative:res.other.syntheticalNum,sensitive:res.other.syntheticalNum},
          ]
        })
      },
      getCollectNum() {
        this.$jqPost(this.$api.getMsgIncloude, {
            action:"getCollectNum",
          	account:'admin@htlywhj',
          	password:'admin'
        }).then(res => {
          if (res.state == 1) {
            this.rtCollection = res.realTimeCollect.split(",").join("");
            this.netSiteNum = res.webSiteSource;
            this.currentInclude = res.currentCollect;
          }
        });
      },
      switchTable(){
        this.$jqPost(this.$api.getDetailByType, {
          basicType: this.radio,
        }).then(res => {
          if (res.retCode == 200 && res.retData) {
              this.monitorConfig.option.tableData = res.retData.data;
          }
          this.$refs.monitorTable.initTable();
        })
      },
      getActiveSite(){
        this.$jqPost(this.$api.getPublicOpinion, {
          action: 'query',
          qcAction: 'getFacetFieldInfo',
          account: 'admin@htlywhj',
          password: 'admin',
          fields: 'source'
        }).then(res => {
          if (res.state == 1) {
            var keysTotal = Object.keys(res.facetInfo.source);
            var dataArr = [];

            var keys = [];
            var values = [];

            keysTotal.map(name=> {
              dataArr.push({
                name:name,
                value:parseInt(res.facetInfo.source[name])
              });
            })
            dataArr.sort((a,b)=>{
              return b.value-a.value;
            })
            var kvs = dataArr.splice(0,10);


            kvs.map(item => {
              keys.push(item.name);
              values.push(item.value);
            })

            this.activeSiteConfig.option.xAxis = keys;
            this.activeSiteConfig.option.y[0].data = values;
          }
          this.$refs.activeSite.initChart();
        })
      }
    },
    beforeDestroy() {
      clearInterval(this.totalInterval);
    }
  }
</script>

<style lang="scss" type="text/scss">
  .public-op .card-item {
	  width: 615px;
    float: left;
	  > .card-div {
	    height: 386px;
	  }
	}
  .rt-collect {
    height: 122px;
    margin-top: 30px;
    background-color: rgba(62, 162, 254, 0.2);
    color: #77F7E7;
    >p {
      font-size: 20px;
      padding: 10px 0 5px 30px;

    }
    >h2 {
        text-align: center;
        font-size: 50px;
        font-weight:500;
        line-height:80px;
    }
  }
  .collect-source {
    text-align: center;

    >div {
      display: inline-block;
      height: 135px;
      width: 265px;
      background:url(../../../assets/imgs/v2/semi-circle.png) no-repeat;
      margin-top: 38px;

      >span {
        font-size: 27px;
        display: inline-block;
        margin-top: 90px;
      }

    }
    >p {
      margin-top: 15px;
      font-size: 20px;
      color: #6BEEFF;
    }
  }

  .info-record-top {
    font-size: 20px;
    padding: 20px;
    >i {
      display: inline-block;
      vertical-align: middle;
      width:36px;
      height:16px;
      margin-left:20px;
    }
    >span {
      vertical-align: middle;
      display:inline-block;
      margin-left:5px;
    }
  }
  .info-record-t {
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
  }
  .info-record-th {
    background-color: rgba(62, 162, 254, 0.2);
  }
  .non-negative {
    color: #6C43F7;
  }
  .non-negative-bg {
    background-color: #6C43F7;
  }
  .sensitive {
    color: #EDA652;
  }
  .sensitive-bg {
     background-color: #EDA652;
  }

  .monitor-data {
    .el-radio-group {
      margin-top: 45px;
    }
    .el-radio__input {
      display: none;
    }
    .is-checked {
      border-color:rgba(130,100,230,1) !important;
      background:linear-gradient(90deg,rgba(108,67,247,1),rgba(180,158,255,1));
    }
    .el-radio {
      margin: 0px 16px 24px 30px;
      width: 130px;
      height: 36px;
      padding: 0;
      text-align:center;
      border-color:rgba(130,100,230,1);

      .el-radio__label {
        padding: 0;
        font-size: 20px;
        line-height: 36px;
        color: #FFF !important;
      }
    }
  }

</style>
